
import { Button, Table, Space, Form, Input } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useState } from 'react';
import './style'

interface DataType {
  key: React.Key;
  id: string;
  age: string;
  address: string;
  input: string;
  Time: string;
  move: string;
  tags: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '批次编号',
    dataIndex: 'name',

  },
  {
    title: '批次等级',
    dataIndex: 'age',
  },
  {
    title: '鸡苗供应单位',
    dataIndex: 'address',
  },
  {
    title: '转入单位',
    dataIndex: 'input',
  },
  {
    title: '转移时间',
    dataIndex: 'Time',
  },
  {
    title: '转移经手人',
    dataIndex: 'move',
  },

  {
    title: '备注',
    key: 'tags',
    dataIndex: 'tags',
    // render: (_, { tags }) => (
    //   <>
    //     {tags.map(tag => {
    //       let color = tag ==='已完成' ? 'green' : 'volcano';
    //       if (tag === '未完成') {
    //         color = 'volcano';
    //       }
    // return (
    //   <Tag color={color} key={tag}>
    //     {/* {tag.toUpperCase()} */}
    //   </Tag>
    //       );
    //     })}
    //   </>
    // ),
  },


  {
    title: '操作',
    key: 'action',
    dataIndex: 'address',
    render: (_, record) => (
      <Space size="middle">
        <a href='/#'>详情 </a>
        <a href='/#'>编辑</a>
        <a href='/#' style={{ color: 'red' }}>删除</a>
      </Space>
    ),
  },
];

const data: DataType[] = [];
for (let i = 0; i < 9; i++) {
  data.push({
    key: i,
    id: '01',
    age: '一',
    address: `某供应商 `,
    input: '某养殖单位',
    Time: '2022-03-12',
    move: '某养殖单位',
    tags: '已完成',
  });
}



const App: React.FC = () => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    // console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // const hasSelected = selectedRowKeys.length > 0;

  return (

    <div>
      <div className="site-button-ghost-wrapper">
        <Button type="primary" style={{ marginLeft: 12 }}>新增计划</Button>
        <Button danger style={{ marginLeft: 12 }}>批量删除</Button>
      </div>



      <Table rowSelection={rowSelection} pagination={{ pageSize: 3 }} columns={columns} dataSource={data} scroll={{ x: 1300 }} />

      <Form.Item
        label="批次编号"
        name="Id"
        rules={[{ required: true, message: '请输入批次编号' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="Grade"
        label="批次等级"
        rules={[{ required: true, message: '请输入批次等级' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="鸡苗供应单位"
        name="company1"
        rules={[{ required: true, message: '请输入鸡苗供应单位' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="转入单位"
        name="company2"
        rules={[{ required: true, message: '请输入转入单位' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="moveTime"
        label="转移时间"
        rules={[{ required: true, message: '请输入转移时间' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="remark"
        label="备注"
        rules={[{ required: true, message: '请输入备注' }]}
      >
        <Input />
      </Form.Item>


    </div>

  );
};


export default App


// ReactDOM.render(<DatePicker />, mountNode);
